import React from 'react';
import {NavLink,Route,HashRouter} from 'react-router-dom'
import ItemComponent from '../../goods/details/item'
import ContentComponent from '../../goods/details/content'
import ReviewComponent from '../../goods/details/review'
import index from '../../../assets/css/goods/details/index.module.css'
import {localParam} from "../../../components/common/function"
import {connect} from "react-redux";

class DetailsIndex extends React.Component{
    constructor(){
        super();
        this.state={
            id:''
        }
    }
    componentWillMount() {
        let gid =decodeURIComponent(localParam(this.props.location.search).search.gid);
        this.setState({id:gid})
    }
    goBack(){
        this.props.history.push('/')
    }
    goTo(){
        if (localStorage.path) {
            let path = localStorage.path;
            path="twoTab";
            localStorage.path = path;
            this.props.history.push('/')
        }
    }

    render() {
        let isShow=this.props.state.userInfo.amount;
        return(
            <HashRouter>
                <div className={index.boxIndex}>
                    <ul>
                        <li>
                            <img src={require("../../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                        </li>
                        <li>
                            <NavLink activeClassName={index.active} to={"/goods/details/item?gid="+this.state.id}>商品</NavLink>
                        </li>
                        <li>
                            <NavLink activeClassName={index.active} to={"/goods/details/content?gid="+this.state.id}>详情</NavLink>
                        </li>
                        <li>
                            <NavLink activeClassName={index.active} to={"/goods/details/review?gid="+this.state.id}>评价</NavLink>
                        </li>
                        <li>
                            <img onClick={this.goTo.bind(this)} src={require("../../../assets/images/home/goods/cart.png")} alt=""/>
                            <span className={index.connect} style={{display:isShow?"block":"none"}}></span>
                        </li>
                    </ul>
                    <div>
                        <Route exact path="/goods/details/item" component={ItemComponent}></Route>
                        <Route path="/goods/details/content" component={ContentComponent}></Route>
                        <Route path="/goods/details/review" component={ReviewComponent}></Route>
                    </div>
                </div>
            </HashRouter>
        )
    }
}

export default connect((state)=>{
    return{
        state:state
    }
})(DetailsIndex)